import { useIntersectionObserver } from "@vueuse/core";
import defaultGif from '@/assets/imgs/default.gif'
import { App } from 'vue';

export default {
  install(app: App) {
    // 全局指令
    app.directive('lazy', {
      // mounted 是 v3 中自定义指令的生命周期，他会被自动调用
      // 它表示的含义和组件的mounted是一样的
      // el是 dom 元素， binding
      mounted(el, binding) {
        el.src = defaultGif

        //实时鉴定el是否可见， 如果可见 给它的src设置binding.value
        const { stop } = useIntersectionObserver(el, ([{ isIntersecting }]) => {
          if (isIntersecting) {
            el.src = binding.value

            stop()
            el.onerror = function () {
              el.src = defaultGif
            }
          }
        })

      }
    })
  }
}